<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/02-2-roomInfo.css">
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="//at.alicdn.com/t/font_au3ce8gckh4lhaor.js"></script>
</head>
<body>
<!--通用top begin -->
<!--header begin-->
<header class="wrap">
    <div class="banxin welcome clearfix">
        <div class="wel_left fl">
            <span class="white">欢迎来到租房网！更多房源选择任您挑选！请选择您的位置：</span>
            <select class="city white" name="city" id="">
                <option value="武汉" selected>武汉</option>
            </select>

        </div>
        <div class="wel_right fr">
            <a class="white" href="javascript:void(0)">收藏本站 |</a>
            <a class="white" href="javascript:void(0)">设为首页 |</a>
            <a class="white" href="javascript:void(0)">登录 |</a>
            <a class="white" href="javascript:void(0)">注册 </a>
        </div>
    </div>
</header>
<!--header end-->
<!--nav begin-->
<nav class="wrap">
    <div class="banxin nav  clearfix">
        <a class="logo" href="javascript:void(0)"></a>
        <ul class="nav_items fl clearfix">
            <li class="fl"><a href="javascript:void(0)">首页</a></li>
            <li class="fl"><a href="javascript:void(0)">房源信息</a></li>
            <li class="fl"><a href="javascript:void(0)">求租信息</a></li>
            <li class="fl"><a href="javascript:void(0)">生活馆</a></li>
            <li class="fl"><a href="javascript:void(0)">注册登录</a></li>
        </ul>
        <div class="hot-line fr clearfix">
            <p class="p_number green"><b></b>400-6789-888</p>
            <p class="p_time" align="right">看房热线：<span class="green">08:00 - 21:00</span></p>
        </div>
    </div>
</nav>
<!--nav end-->
<!--通用top end -->

<!--图片简介 begin-->
<div class="info-pic wrap">
    <div class="banner banxin clearfix">
        <!--左侧 图片-->
        <div class="swiper-container clearfix fl">
            <div class="swiper-wrapper">
                <div class="swiper-slide"><a href="javascript:void(0)"><img src="images/banner.jpg" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img src="images/banner2.png" alt=""></a></div>
                <div class="swiper-slide"><a href="javascript:void(0)"><img src="images/banner.jpg" alt=""></a></div>
            </div>
            <!-- Add Pagination -->
            <!--<div class="swiper-pagination"></div>-->
            <!-- Add Arrows -->
            <div class="swiper-button-next"></div>
            <div class="swiper-button-prev"></div>
            <!--Add pagination-->
            <div class="swiper-pagination swiper-pagination-fraction"><span class="swiper-pagination-current">1</span> / <span class="swiper-pagination-total">10</span></div>
        </div>

        <!--右侧 简介-->
        <div class="contact fr">
            <h3><span>汉口</span>-<span>二室一厅</span>-<span>80</span>m³-<span>9/15</span>F</h3>
            <p><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-didian"></use></svg> <a>武汉市武昌区和平大道300号6365645653463456456435</a></p>
            <p><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-shijian"></use></svg> <span>2017-8-9 19:00</span> &nbsp更新</p>
            <p><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-1-part"></use></svg> <span>合租</span></p>
            <p class="payment"><span class="orange">￥600/月</span>&nbsp&nbsp&nbsp&nbsp<span class="how">押一付一</span></p>
            <p class="phoneNum orange"><button>预 约 看 房</button></p>
        </div>
    </div>
</div>
<!--图片简介 end-->

<!--房屋详情 begin-->
<div class="moreInfo banxin">
    <!-- 1 房源描述-->
    <div class="describe wrapper clearfix">
        <div class="left fl"><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-1-describe"></use></svg> 房源描述</div>
        <div class="right fl"><p class="text">1、填写房屋描述相当于告诉您的客户购买房子的理由。 　　2、填写房屋描述时，将房屋卖点一一分条阐述清楚，一定要突出房屋的特征，突出卖点，这样才能够得到客户更多的关注，满足客户对房屋的需求.</p>
        </div>
    </div>

    <!-- 2 房源详情-->
    <div class="room-details wrapper clearfix">
        <div class="left fl"><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-2-details"></use></svg> 房源描述</div>
        <div class="right fl">
            <p class="text"><label for="">户型：</label>&nbsp&nbsp<span>2室1厅1卫</span></p>
            <p class="text"><label for="">朝向：</label>&nbsp&nbsp<span>南</span>&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp<span>6/20F</span></p>
            <p class="text"><label for="">面积：</label>&nbsp&nbsp<span>80</span>㎡</p>
            <p class="text"><label for="">小区：</label>&nbsp&nbsp<span>保利花园</span></p>
            <p class="text"><label for="">地址：</label>&nbsp&nbsp<span>武汉市武昌区和平大道300号</span></p>
        </div>
    </div>

    <!-- 3 基础设施-->
    <div class="baseSet wrapper clearfix">
        <div class="left fl"><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-3-base"></use></svg> 基础设施</div>
        <div class="right fl">
            <ul class="surrounding-facilities clearfix">
                <li><img src="images/01bingxiang.jpg" alt=""><br><label>冰箱</label><br></li>
                <li><img src="images/02reshuiqi.jpg" alt=""><br><label>热水器</label><br></li>
                <li><img src="images/03-dianshi.jpg" alt=""><br><label>电视</label><br></li>
                <li><img src="images/04-kongtiao.jpg" alt=""><br><label>空调</label><br></li>
                <li><img src="images/05wifi.jpg" alt=""><br><label>无线网</label><br></li>
                <li><img src="images/06chuang.jpg" alt=""><br><label>床</label><br></li>
                <li><img src="images/07shafa.jpg" alt=""><br><label>沙发</label><br></li>
                <li><img src="images/08yigui.jpg" alt=""><br><label>衣柜</label><br></li>
                <li><img src="images/09chufang.jpg" alt=""><br><label>厨房</label><br></li>
                <li><img src="images/10nuanqi.jpg" alt=""><br><label>暖气</label><br></li>
            </ul>
        </div>
    </div>

    <!-- 4 周边配套-->
    <div class="room-details wrapper clearfix">
        <div class="left fl"><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-4-around"></use></svg> 周边配套</div>
        <div class="right fl">
            <p class="text"><label for="">地铁：</label>&nbsp&nbsp<span>3号线龙阳村站、4号线王家湾站、1号线循礼门站</span></p>
            <p class="text"><label for="">公交：</label>&nbsp&nbsp<span>12路、20路、内环80路</span></p>
            <p class="text"><label for="">餐饮：</label>&nbsp&nbsp<span>80</span>麦当劳、肯德基、烤馍馍、蔡林记</p>
            <p class="text"><label for="">购物：</label>&nbsp&nbsp<span>大洋百货、淘宝街、沃尔玛</span></p>
        </div>
    </div>

    <!-- 5 位置信息-->
    <div class="around wrapper clearfix">
        <div class="left fl"><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-5-locate"></use></svg> 位置信息</div>
        <div class="right fl">
        </div>
    </div>

    <!-- 6 房间概况-->
    <div class="someInfo wrapper clearfix">
        <div class="left fl"><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-6-roominfo"></use></svg> 房价概况</div>
        <div class="right fl">
            <ul>
                <li class="clearfix">
                    <h4>卧室A <span class="orange">12㎡</span><button class="fr">已出租</button></h4>
                    <p><span class="orange">☑</span><span>空调</span>&nbsp&nbsp&nbsp<span class="orange">☑</span><span>飘窗</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span>一男一女</span></p>
                    <p>房间配置：床、沙发、镜子、衣柜、鞋柜、冰箱、台灯</p>
                </li>
                <li class="clearfix">
                        <h4>卧室B <span class="orange">12㎡</span><button class="online fr">已出租</button></h4>
                        <p><span class="orange">☑</span><span>空调</span>&nbsp&nbsp&nbsp<span class="orange">☑</span><span>飘窗</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span>一男一女</span></p>
                        <p>房间配置：床、沙发、镜子、衣柜、鞋柜、冰箱、台灯</p>
                </li>
                <li class="clearfix">
                    <h4>卧室C <span class="orange">12㎡</span><button class="fr">已出租</button></h4>
                    <p><span class="orange">☑</span><span>空调</span>&nbsp&nbsp&nbsp<span class="orange">☑</span><span>飘窗</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span>一男一女</span></p>
                    <p>房间配置：床、沙发、镜子、衣柜、鞋柜、冰箱、台灯</p>
                </li>
                <li class="clearfix">
                    <h4>卧室D <span class="orange">12㎡</span><button class="online fr">已出租</button></h4>
                    <p><span class="orange">☑</span><span>空调</span>&nbsp&nbsp&nbsp<span class="orange">☑</span><span>飘窗</span>&nbsp&nbsp&nbsp&nbsp&nbsp<span>一男一女</span></p>
                    <p>房间配置：床、沙发、镜子、衣柜、鞋柜、冰箱、台灯</p>
                </li>

            </ul>
        </div>
    </div>

    <!-- 7 看房评价-->
    <div class="comment wrapper clearfix">
        <div class="left fl"><svg class="icon" aria-hidden="true"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#icon-comment"></use></svg> 看房评价</div>
        <div class="right fl">
            <h3>总评分：<span>★★★★☆</span>&nbsp&nbsp&nbsp&nbsp&nbsp(共 20 条评价)</h3>
            <ul>
                <li class="clearfix">
                    <p class="comment-pic">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                    </p>
                    <p class="comment-text">不好意思，评价晚了。买了一对杯子，拿到的时候真的很惊喜，对一个我这样的外行人来说，真的没有找到一点瑕疵，很漂亮的杯子啊，是我一直想要的，本来想买正品的，因为看了评价说，基本没有瑕疵，就想碰碰运气的，结果真的很好啊，看图吧……</p>
                    <p class="comment-time"><span class="orange">va**fe（匿名）</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">时间：2017-8-12 11:40</span></p>
                </li>
                <li class="clearfix">
                    <p class="comment-pic">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                    </p>
                    <p class="comment-text">不好意思，评价晚了。买了一对杯子，拿到的时候真的很惊喜，对一个我这样的外行人来说，真的没有找到一点瑕疵，很漂亮的杯子啊，是我一直想要的，本来想买正品的，因为看了评价说，基本没有瑕疵，就想碰碰运气的，结果真的很好啊，看图吧……</p>
                    <p class="comment-time"><span class="orange">va**fe（匿名）</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">时间：2017-8-12 11:40</span></p>
                </li>
                <li class="clearfix">
                    <p class="comment-pic">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                    </p>
                    <p class="comment-text">不好意思，评价晚了。买了一对杯子，拿到的时候真的很惊喜，对一个我这样的外行人来说，真的没有找到一点瑕疵，很漂亮的杯子啊，是我一直想要的，本来想买正品的，因为看了评价说，基本没有瑕疵，就想碰碰运气的，结果真的很好啊，看图吧……</p>
                    <p class="comment-time"><span class="orange">va**fe（匿名）</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">时间：2017-8-12 11:40</span></p>
                </li>
                <li class="clearfix">
                    <p class="comment-pic">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                        <img src="images/commentpic.png" alt="评论图">
                    </p>
                    <p class="comment-text">不好意思，评价晚了。买了一对杯子，拿到的时候真的很惊喜，对一个我这样的外行人来说，真的没有找到一点瑕疵，很漂亮的杯子啊，是我一直想要的，本来想买正品的，因为看了评价说，基本没有瑕疵，就想碰碰运气的，结果真的很好啊，看图吧……</p>
                    <p class="comment-time"><span class="orange">va**fe（匿名）</span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span class="grey">时间：2017-8-12 11:40</span></p>
                </li>
            </ul>
        </div>
    </div>
</div>
<!--房屋详情 end-->

<!--同小区其他房源推荐 begin-->
<div class="recommend banxin">
    <h3>同小区其他房源推荐</h3>
    <div class="tab-content newest active">
        <div class="tabpanel">
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
        </div>
    </div>
</div>
<!--同小区其他房源推荐 end-->

<!--附近类似房源推荐 begin-->
<div class="recommend banxin">
    <h3>附近类似房源推荐</h3>
    <div class="tab-content newest active">
        <div class="tabpanel">
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
            <a href="" class="trig">
                <img src="images/houseMess.png" alt="">
                <div class="trig_txt">
                    <div class="trig-price orange">1999 <span>元/月</span></div>
                    <div class="trig-addr">洪山区-教师小区-五居室-西卧-RoomB-10.0㎡</div>
                    <div class="trig-describe">位移徐东附近，可拎包入住</div>
                </div>
            </a>
        </div>
    </div>
</div>
<!--附近类似房源推荐 end-->

<div class="backToTop">↑<p>Top</p></div>

<!--footer begin-->
<div class="footer wrap">
    <img src="images/footer.png" alt="">
    <div class="company banxin">
        <span class="service">SERVICE</span>
        电话咨询服务电话：<span class="number green">400-1371-365</span>
        <span class="right">&reg 2017 Zuke</span>
    </div>
</div>
<!--footer end-->

<script src="js/jquery-3.2.1.js"></script>
<script src="js/nav.js"></script>
<!-- Swiper JS -->
<script src="js/swiper.min.js"></script>
<!-- Initialize Swiper -->
<script>
    //    banner autoplay
    var swiper = new Swiper('.swiper-container', {
        pagination: '.swiper-pagination',
        paginationType: 'fraction',
        nextButton: '.swiper-button-next',
        prevButton: '.swiper-button-prev',
        paginationClickable: true,
//        spaceBetween: 500,
        centeredSlides: true,
        autoplay: 2000,
        autoplayDisableOnInteraction: false,
        effect: 'fade',
        loop: true
    });

    $(".backToTop").click(function () {
        console.log(11);
        scrollTo(0,0);
    });
</script>
</body>
</html>